<template>
  <div class="layout">
    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
      <FormItem label="平台" prop="endPoint">
        <RadioGroup v-model="formValidate.type" type="button">
          <Radio label="ALI">阿里云</Radio>
<!--          <Radio label="HUAWEI">华为云</Radio>-->
          <Radio label="TENCENT">腾讯云</Radio>
        </RadioGroup>
      </FormItem>

      <!--      阿里云-->
      <FormItem v-if="formValidate.type==='ALI'" label="AccessKeyId" prop="aliyun_secret_id">
        <Input v-model="formValidate.aliyun_secret_id"/>
      </FormItem>
      <FormItem v-if="formValidate.type==='ALI'" label="AccessSecretKey" prop="aliyun_secret_key">
        <Input v-model="formValidate.aliyun_secret_key"/>
      </FormItem>
      <FormItem v-if="formValidate.type==='ALI'" label="短信签名" prop="aliyun_signa_name">
        <Input v-model="formValidate.aliyun_signa_name"/>
      </FormItem>

      <!--      华为云-->
<!--      <FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">-->
<!--        <Input v-model="formValidate.huaweiAppKey"/>-->
<!--      </FormItem>-->
<!--      <FormItem v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">-->
<!--        <Input v-model="formValidate.huaweiAppSecret"/>-->
<!--      </FormItem>-->
<!--      <FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">-->
<!--        <Input v-model="formValidate.huaweiSender"/>-->
<!--      </FormItem>-->
<!--      <FormItem v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">-->
<!--        <Input v-model="formValidate.huaweiSignature"/>-->
<!--      </FormItem>-->

      <!--      腾讯云-->
      <FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencent_secret_id">
        <Input v-model="formValidate.tencent_secret_id"/>
      </FormItem>
      <FormItem v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencent_secret_key">
        <Input v-model="formValidate.tencent_secret_key"/>
      </FormItem>
      <FormItem v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencent_app_id">
        <Input v-model="formValidate.tencent_app_id"/>
      </FormItem>
      <FormItem v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencent_signa_name">
        <Input v-model="formValidate.tencent_signa_name"/>
      </FormItem>

      <div class="label-btns">
        <Button type="primary" @click="submit('formValidate')">保存</Button>

      </div>
    </Form>
  </div>
</template>
<script>
import {getSetting, getSettingInfo, setSetting} from "@/api/index";
import {handleSubmit} from "./validate";

export default {
  data() {
    return {
      result: "",
      ruleValidate: {}, // 验证规则
      formValidate: { // 表单数据
        aliyun_secret_id: "",
        aliyun_secret_key: "",
        aliyun_signa_name: "",
        tencent_secret_id: "",
        tencent_secret_key: "",
        tencent_signa_name: "",
        tencent_app_id: "",
        type:"ALI"
      },
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    // 保存
    submit(name) {
      let that = this;
      if (handleSubmit(that, name)) {
        this.setupSetting()
      }
    },
    // 保存设置
    setupSetting() {
      setSetting(this.type, this.formValidate).then((res) => {
        if (res.success) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },
    // 实例化数据
    init() {
      getSetting().then((res) => {
          this.formValidate.aliyun_secret_id = res.data.aliyun_secret_id
          this.formValidate.aliyun_secret_key = res.data.aliyun_secret_key
          this.formValidate.aliyun_signa_name = res.data.aliyun_signa_name
          this.formValidate.tencent_secret_id = res.data.tencent_secret_id
          this.formValidate.tencent_secret_key = res.data.tencent_secret_key
          this.formValidate.tencent_signa_name = res.data.tencent_signa_name
          this.formValidate.tencent_app_id = res.data.tencent_app_id
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";

.label-item {
  display: flex;
}

/deep/ .ivu-input {
  width: 300px !important;
  margin: 0 10px;
}

.ivu-input-wrapper {
  width: 300px;
  margin-right: 10px;
}
</style>
